/**
 * aqiData，存储用户输入的空气指数数据
 * 示例格式：
 * aqiData = {
 *    "北京": 90,
 *    "上海": 40
 * };
 */
var aqiData = {};

/**
 * 从用户输入中获取数据，向aqiData中增加一条数据
 * 然后渲染aqi-list列表，增加新增的数据
 */
function addAqiData() {
  var city = document.getElementById('aqi-city-input').value;
  var val = document.getElementById('aqi-value-input').value;
  // var c = /^(\u4e00-\u9fa5a-zA-Z)*$/g;
  var c = /[\u4e00-\u9fa5a-zA-Z]/g.test(city);
  var v = /^[1-9]\d*$/g.test(val);

  if (!c || !v) {
    alert('请输入正确的城市名称和空气质量指数！');
    return;
  }

  aqiData[city] = val;

  //
}

/**
 * 渲染aqi-table表格
 */
function renderAqiList() {
  var table = document.getElementById('aqi-table');
  table.innerHTML = '';
  var doc = document.createDocumentFragment();
  for (var i in aqiData) {
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + i + '</td><td>' + aqiData[i] + '</td><td><button class="del">删除</button></td>';
    doc.appendChild(tr);
  }

  table.appendChild(doc);
}

/**
 * 点击add-btn时的处理逻辑
 * 获取用户输入，更新数据，并进行页面呈现的更新
 */
function addBtnHandle() {
  addAqiData();
  renderAqiList();
}

/**
 * 点击各个删除按钮的时候的处理逻辑
 * 获取哪个城市数据被删，删除数据，更新表格显示
 */
function delBtnHandle(e) {
  // do sth.
  var obj = e.target;
  if (e.target.tagName.toUpperCase() === 'BUTTON') {
    var html = obj.parentNode.parentNode.firstChild.innerHTML;
    var city = html.replace(/\<\/?a-z\>/g);
    delete aqiData[city];
    renderAqiList();
  }

}

function init() {

  // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
  document.getElementById('add-btn').addEventListener('click', addBtnHandle, false);

  // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
  document.getElementById('aqi-table').addEventListener('click', delBtnHandle, false);
}

window.onload = function() {
  init();
};
